<template>
    <div id="app">
        <div class="header">
            <div class="logo">
                <h1>系统管理平台</h1>
            </div>
            <!-- 右上角 -->
            <div class="user-info">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <!-- 修改为图片展示 -->
                        <img :src="userAvatar" alt="用户头像" class="user-avatar">
                        <i class="el-icon-arrow-down"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click.native="showUserDialog">个人中心</el-dropdown-item>
                            <el-dropdown-item @click.native="logoutShopping">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="container">
            <!-- 左侧菜单 -->
            <div class="sidebar">
                <el-menu class="el-menu-vertical-demo sidebar-menu" @select="handleMenuSelect">
                    <!-- 移除 template 上的 key -->
                    <template v-for="menu in menuList">
                        <el-submenu v-if="menu.children && menu.children.length > 0" :key="menu.id"
                            :index="menu.component">
                            <template #title>
                                <i :class="menu.icon"></i>
                                <span>{{ menu.menuName }}</span>
                            </template>
                            <el-menu-item v-for="childMenu in menu.children" :key="childMenu.id"
                                :index="childMenu.component">
                                <i :class="childMenu.icon"></i>
                                <span>{{ childMenu.menuName }}</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :key="menu.id" :index="menu.component">
                            <i :class="menu.icon"></i>
                            <span>{{ menu.menuName }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </div>
            <div class="content" v-if="isContentVisible">
                <component :is="currentComponent"></component>
            </div>
            <!-- 右侧内容 -->
            <div class="content" v-else>
                <el-empty description="空空如也"></el-empty>
            </div>
        </div>
        <!-- 个人信息弹窗 -->
        <el-dialog :visible.sync="userDialogVisible" title="个人信息" width="30%" :show-close="false"
            custom-class="user_info-dialog">
            <div class="dialog-content">
                <div class="avatar-container">
                    <img :src="userAvatar" alt="用户头像" class="user-avatar-big">
                </div>
            <el-form v-model="userDialogInfo" label-width="100px">
                <el-form-item label="用户名:">
                    <span>{{ userDialogInfo.userName }}</span>
                </el-form-item>
                <el-form-item label="昵称:">
                    <span>{{ userDialogInfo.nickName }}</span>
                </el-form-item>
                <el-form-item label="邮箱:">
                    <span>{{ userDialogInfo.email }}</span>
                </el-form-item>
                <el-form-item label="手机号:">
                    <span>{{ userDialogInfo.phone }}</span>
                </el-form-item>
                <el-form-item label="角色">
                    <span>{{ userDialogInfo.roleName }}</span>
                </el-form-item>
            </el-form>
        </div>
            <template #footer>
                <span class="el-dialog__footer">
                    <el-button icon="el-icon-close" type="warn" @click="closeUserDialog">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import MenuManage from '../menu/MenuManage.vue';
import UserManage from '../user/UserManage.vue';
import RoleManage from '../role/RoleManage.vue';
import axios from 'axios';

export default {
    name: 'HomePage',
    data() {
        return {
            menuList: [],
            // 当前菜单对应的组件
            currentComponent: null,
            // 右侧页面是否展示
            isContentVisible: false,
            // 右上角个人信息
            userDialogVisible: false,
            userDialogInfo: {
                userName: '',
                email: '',
                phone: '',
                role: ''
            },
            // 新增用户头像链接
            userAvatar: ''
        };
    },
    methods: {
        // 页面首次加载时调用获取菜单数据的方法
        fetchMenuData() {
            axios.get('http://localhost:8080/shopping/menu/all')
                .then(response => {
                    this.menuList = response.data.data;
                })
                .catch(error => {
                    console.error('获取菜单数据时出错:', error);
                });
        },

        // 点击菜单展示页面
        handleMenuSelect(key) {
            this.isContentVisible = true;
            // key的值接收的是index的值
            const componentMap = {
                'MenuManage': MenuManage,
                'UserManage': UserManage,
                'RoleManage': RoleManage
            };
            this.currentComponent = componentMap[key];
            if (!this.currentComponent) {
                console.error(`未找到对应的组件: ${key}`);
            }
        },

        // 点击个人中心按钮
        showUserDialog() {
            this.userDialogVisible = true;
            this.getUserInfo();
        },
        closeUserDialog() {
            this.userDialogVisible = false;
        },

        // 获取右上角个人信息数据
        getUserInfo() {
            // 获取token
            const token = JSON.parse(localStorage.getItem('authToken'));
            if (!token) {
                this.$router.push('/login'); // 跳转到登录页
                return;
            }
            this.userDialogInfo = token;
            // 获取用户头像
            this.fetchUserAvatar();
        },

        // 退出系统
        logoutShopping() {
            localStorage.removeItem('authToken'); // 清空缓存
            this.$router.push('/login'); // 跳转到登录页
            // TODO 目前应该调用后端删除redis数据
        },

        // 获取用户头像
        fetchUserAvatar() {
            this.userAvatar = "http://localhost:8080/shopping/files/" + localStorage.getItem('avatarPath');
        }
    },
    mounted() {
        // 页面首次加载时调用获取菜单数据的方法
        this.fetchMenuData();
        // 页面加载时获取用户头像
        this.fetchUserAvatar();
    }
};
</script>

<style scoped>
/* 设置 #app 元素铺满整个视口 */
#app {
    width: 1500px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 头部样式 */
.header {
    height: 60px;
    background-color: #409eff;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo h1 {
    font-size: 24px;
    margin: 0;
}

.user-info .el-dropdown-link {
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* 用户头像样式 */
.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5px;
}

/* 整体容器样式 */
.container {
    width: 1460px;
    display: flex;
    flex: 1;
    background: #f5f7fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 侧边栏样式 */
.sidebar {
    width: 220px;
    background: #fff;
    color: #333;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.sidebar-menu {
    border-right: none;
}

.sidebar-menu .el-submenu__title,
.sidebar-menu .el-menu-item {
    color: #333;
    transition: background-color 0.3s ease;
}

.sidebar-menu .el-submenu__title:hover,
.sidebar-menu .el-menu-item:hover {
    background-color: #ecf5ff;
}

.sidebar-menu .el-menu-item.is-active {
    background-color: #e4f1ff;
    color: #409eff;
    position: relative;
}

.sidebar-menu .el-menu-item.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #409eff;
}

/* 内容区域样式 */
.content {
    flex: 1;
    padding: 30px;
    background-color: white;
    margin-left: 5px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
}

/* 个人信息弹窗样式 */
.el-dialog__header {
    background-color: #6d88a4;
    border-bottom: 1px solid #e5e5e5;
    padding: 15px;
}

.el-dialog__title {
    color: #67c23a;
    font-size: 18px;
}

.el-dialog__body {
    padding: 20px;
    background-color: #409eff;
}

.el-dialog__footer {
    border-top: 1px solid #e5e5e5;
    padding: 15px;
    text-align: right;
}

.dialog-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.avatar-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-avatar-big {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>